<template>
  <div class="chat-container">
    <h1>智能医疗助手</h1>
    
    <div class="chat-history">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
        <div class="message-header">
          <span v-if="message.type === 'user'">用户</span>
          <span v-else>AI助手</span>
        </div>
        <div class="message-content">{{ message.content }}</div>
      </div>
    </div>
    
    <div class="input-area">
      <textarea 
        v-model="inputQuestion" 
        placeholder="请输入您的医疗问题..."
        @keyup.enter="sendQuestion"
      ></textarea>
      <button @click="sendQuestion">发送</button>
      <button @click="saveToDatabase" class="secondary">保存到数据库</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const API_BASE_URL = 'http://localhost:8000' // 根据你的后端地址调整

const inputQuestion = ref('')
const messages = ref([])

const sendQuestion = async () => {
  if (!inputQuestion.value.trim()) return
  
  // 添加用户消息
  messages.value.push({
    type: 'user',
    content: inputQuestion.value
  })
  
  const question = inputQuestion.value
  inputQuestion.value = ''
  
  try {
    // 添加加载状态
    messages.value.push({
      type: 'ai',
      content: '思考中...'
    })
    
    const response = await axios.post(`${API_BASE_URL}/chat/`, {
      question: question
    })
    
    // 移除加载状态，添加AI回复
    messages.value.pop()
    messages.value.push({
      type: 'ai',
      content: response.data.message.output
    })
    
  } catch (error) {
    console.error('请求出错:', error)
    messages.value.pop()
    messages.value.push({
      type: 'ai',
      content: '抱歉，出错了: ' + error.message
    })
  }
}

const saveToDatabase = async () => {
  try {
    const response = await axios.post(`${API_BASE_URL}/chat/`, {
      question: "请将Redis中的问题和答案保存到MySQL数据库"
    })
    
    // 显示保存结果
    messages.value.push({
      type: 'system',
      content: response.data.message.output
    })
    
  } catch (error) {
    console.error('保存出错:', error)
    messages.value.push({
      type: 'system',
      content: '保存失败: ' + error.message
    })
  }
}
</script>

<style scoped>
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #2c3e50;
}

.chat-history {
  height: 500px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.message {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
}

.message-header {
  font-weight: bold;
  margin-bottom: 5px;
}

.user {
  background-color: #e3f2fd;
  margin-left: 20%;
}

.ai {
  background-color: #f5f5f5;
  margin-right: 20%;
}

.system {
  background-color: #e8f5e9;
  text-align: center;
  font-style: italic;
}

.input-area {
  display: flex;
  flex-direction: column;
}

textarea {
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: none;
}

button {
  padding: 10px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3aa876;
}

button.secondary {
  background-color: #f0f0f0;
  color: #333;
  margin-top: 10px;
}

button.secondary:hover {
  background-color: #e0e0e0;
}
</style>
